<template>
  <div>
    <Card>
      <div class="apply-container">
        <Row>
          <!-- 左侧：申请详情 -->
          <i-col span="16" class="apply-container-left">
            <div class="apply-container-left-title">
              <span class="showSmallPhoto">
                <!-- <img :src="applyInfo.employeeName" /> -->
              </span>
              <b>我的{{item1.applyType}}申请</b>
              <Tag :color="item1.color" style="margin-left:10px;">{{applyInfo.status}}</Tag>
            </div>
            <div>
              <!-- 请假详情 -->
              <div v-if="applyInfo.applyType == '请假'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">开始时间</i-col>
                  <i-col span="20">{{applyInfo.applyType == '外出' ? (applyInfo.startTime).substring(0,16) : applyInfo.startTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">结束时间</i-col>
                  <i-col span="20">{{applyInfo.applyType == '外出' ? (applyInfo.endTime).substring(0,16) : applyInfo.endTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假时长</i-col>
                  <i-col span="20">{{applyInfo.duration}}天</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <div v-for="(item,index) in fileList" :key="index">
                    <i-col span="20" v-if="index == 0">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="20" v-else style="margin-top:13px" offset="3">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                  </div>
                </Row>
              </div>
              <!-- 补卡详情 -->
              <div v-if="applyInfo.applyType == '补卡'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">补卡类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row v-if="applyInfo.cardTime1!=''">
                  <i-col span="3" style="color:#888">上班补卡</i-col>
                  <i-col span="20">{{applyInfo.cardTime1}}</i-col>
                </Row>
                <Row v-if="applyInfo.cardTime2!=''">
                  <i-col span="3" style="color:#888">下班补卡</i-col>
                  <i-col span="20">{{applyInfo.cardTime2}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">补卡事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <div v-for="(item,index) in fileList" :key="index">
                    <i-col span="20" v-if="index == 0">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="20" v-else style="margin-top:13px" offset="3">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                  </div>
                </Row>
              </div>
              <!-- 外出详情 -->
              <div v-if="applyInfo.applyType == '外出'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出地点</i-col>
                  <i-col span="20">{{applyInfo.places}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">开始时间</i-col>
                  <i-col span="20">{{applyInfo.applyType == '外出' ? (applyInfo.startTime).substring(0,16) : applyInfo.startTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">结束时间</i-col>
                  <i-col span="20">{{applyInfo.applyType == '外出' ? (applyInfo.endTime).substring(0,16) : applyInfo.endTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出时长</i-col>
                  <i-col span="20">{{applyInfo.duration}}天</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <div v-for="(item,index) in fileList" :key="index">
                    <i-col span="20" v-if="index == 0">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="20" v-else style="margin-top:13px" offset="3">
                      <div class="download-file" @click="downloadFile(item.id)">
                        <div class="download-file-icon">
                          <Icon type="md-document" size="32" />
                        </div>
                        <div class="download-file-info">
                          <div class="download-file-info-title">{{item.fileName}}</div>
                          <div class="download-file-info-1">{{item.fileSize}}</div>
                        </div>
                      </div>
                    </i-col>
                  </div>
                </Row>
              </div>
            </div>
            <div v-if="afterSubmit">
              <div style="margin-top:12px" v-if="applyInfo.status == '已驳回'">
                <Row>
                  <i-col span="3" style="margin-right:20px">
                    <Button type="primary" @click="resubmit()">重新提交</Button>
                  </i-col>
                  <i-col span="20">
                    <Button
                      type="default"
                      @click="applicationSubmit()"
                      :loading="resetLoading"
                      class="buttonStyle"
                    >撤销</Button>
                  </i-col>
                </Row>
              </div>
            </div>
          </i-col>

          <!-- 右侧：审批流程 -->
          <i-col span="8" class="apply-container-right">
            <div class="submit-success">
              <div class="submit-success-content">
                <div class="submit-success-content-title">审批流程</div>
                <div>
                  <Timeline>
                    <TimelineItem
                      :color="passedColor"
                      v-for="(item,index) in timeLine1"
                      :key="index"
                    >
                      <Icon
                        class="grayDiv"
                        style="background-color: rgba(24, 144, 255, 1)"
                        v-if="index < item1.grade-tit+1"
                        slot="dot"
                        size="24"
                      ></Icon>
                      <Icon
                        class="grayDiv"
                        style="background-color: rgba(128, 128, 128, 1);"
                        v-else
                        slot="dot"
                        size="24"
                      ></Icon>
                      <div class="timeline-box">
                        <Row>
                          <i-col span="10">
                            <div class="timeline-item-title">{{item.title}}</div>
                            <div class="timeline-item-content">{{item.sum}}</div>
                          </i-col>
                          <i-col span="14" v-if="item.people">
                            <div
                              v-for="(people,index) in item.people"
                              :key="index"
                              style="float:right"
                            >
                              <div>
                                <span class="showSmallPhoto">
                                  <!-- <img :src="people.icon" /> -->
                                </span>
                              </div>
                              <div
                                style="text-align:center"
                                class="timeline-item-content"
                              >{{people.name}}</div>
                            </div>
                          </i-col>
                        </Row>
                      </div>
                    </TimelineItem>
                  </Timeline>
                </div>
              </div>
            </div>
            <div>
              <div class="submit-success">
                <div class="submit-success-content">
                  <div class="submit-success-content-title">操作日志</div>
                  <div>
                    <Timeline>
                      <TimelineItem
                        :color="passedColor"
                        v-for="(item,index) in timeLine2"
                        :key="index"
                      >
                        <Icon type="md-radio-button-off" slot="dot" size="24"></Icon>
                        <div>{{item.approvalTime}}</div>
                        <div>{{item.operation}}</div>
                        <div v-if="item.opinion">
                          <span class="more-opinion">意见:</span>
                          {{item.opinion}}
                        </div>
                      </TimelineItem>
                    </Timeline>
                  </div>
                </div>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import {exportFile} from "../../../util/util"
export default {
  data() {
    return {
      applyInfo: "",
      timeLine1: [],
      timeLine2: [],
      item1: this.$route.query.item,
      afterSubmit: true,
      tit: "",
      applyInfoPass: {
        applyNo: "",
        isLeaveApply: "",
        isOutApply: "",
        isRemedyApply: ""
      },
      fileList: [],
      resetLoading: false
    };
  },
  methods: {
    backBtn() {
      // this.$router.go(-1);
      history.go(1)
    },

    // 页面初始化信息
    applyDataQuery() {
      console.log(this.item1,"item1item1item1item1")
      let obj = {
        applyNo: this.item1.applyNo
      };
      this.api.getApplyInfo(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          // 详细信息
          this.applyInfo = res.data;
          console.log(this.applyInfo)
          if (res.data.uerAttachment) {
            this.fileList = res.data.uerAttachment;
          }
          if (this.applyInfo.detail.match("上班打卡异常")) {
            this.applyInfo.cardTime1 = this.applyInfo.clockTime.substr(7, 10);
            this.applyInfo.cardTime2 = "";
          } else if (this.applyInfo.detail.match("上下班打卡异常")) {
            this.applyInfo.cardTime1 = this.applyInfo.clockTime.substr(7, 10);
            this.applyInfo.cardTime2 = this.applyInfo.clockTime.substr(32, 10);
          } else if (this.applyInfo.detail.match("下班打卡异常")) {
            this.applyInfo.cardTime1 = "";
            this.applyInfo.cardTime2 = this.applyInfo.clockTime.substr(7, 10);
          }
          // 审批流程
          if (res.data.userFewVOS.length > 0) {
            this.timeLine1 = res.data.userFewVOS;
            let title = res.data.userFewVOS[0].title;
            if (title == "外勤") {
              this.tit = 1;
            } else if (title == "外勤主管") {
              this.tit = 2;
            } else if (title == "外勤部经理") {
              this.tit = 3;
            } else if (title == "支公司内勤") {
              this.tit = 4;
            } else if (title == "分公司内勤") {
              this.tit = 5;
            } else if (title == "总公司内勤") {
              this.tit = 6;
            }
          } else {
            this.timeLine1 = [];
          }
          // 操作日志
          if (res.data.uerApprovalInfoVOS.length > 0) {
            this.timeLine2 = res.data.uerApprovalInfoVOS;
          } else {
            this.timeLine2 = [];
          }
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    // 撤销操作
    applicationSubmit() {
      this.resetLoading = true;
      let obj = {
        applyNo: this.item1.applyNo
      };
      this.api.cancelApply(obj).then(res => {
        if (res.code == 200) {
          this.resetLoading = false;
          this.$Message.success(res.msg);
          this.afterSubmit = false;
        } else {
          this.resetLoading = false;
          this.$Message.error(res.msg);
        }
      });
    },

    // 重新提交
    resubmit() {
      let obj = {
        applyNo: this.applyInfo.applyNo
      };
      this.applyInfoPass.applyNo = this.applyInfo.applyNo;
      if (this.item1.applyType == "请假") {
        this.applyInfoPass.isLeaveApply = true;
        this.applyInfoPass.isOutApply = false;
        this.applyInfoPass.isRemedyApply = false;
      }
      if (this.item1.applyType == "外出") {
        this.applyInfoPass.isLeaveApply = false;
        this.applyInfoPass.isOutApply = true;
        this.applyInfoPass.isRemedyApply = false;
      }
      if (this.item1.applyType == "补卡") {
        this.applyInfoPass.isLeaveApply = false;
        this.applyInfoPass.isOutApply = false;
        this.applyInfoPass.isRemedyApply = true;
      }
      // 进入对应的重新提交页面
      this.$router.replace({
        name: "launchAudit",
        query: {
          applyInfoPass: this.applyInfoPass
        }
      });
    },

    // 下载申请详情中的文件
    downloadFile(id) {
      let obj = {
        id
      };
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/download",obj)
      // let url = "../rest/fileDownload/download";
      // window.open(url + "?id=" + obj.id);
    }
  },
  watch: {},
  mounted() {
    // 页面初始化信息
    this.applyDataQuery();
  },
  computed: {},
  created() {},
  beforeDestroy() {
    this.applyInfo = null;
    this.timeLine1 = null;
    this.timeLine2 = null;
    this.item1 = null;
    this.afterSubmit = null;
    this.tit = null;
    this.applyInfoPass = null;
    this.fileList = null;
    this.resetLoading = null;
  },
};
</script>

<style lang="less" scoped>
@import "./index";
</style>
